refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop

1 files changed, 6 insertions, 8 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 9ecd8e1..3e4c38f 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -85,13 +85,11 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         ? { date: dates.update }
         : undefined,
     readingTime,
-    thematics: thematics
-      ? thematics.map((thematic) => (
-          <Link key={thematic.id} href={thematic.url}>
-            {thematic.name}
-          </Link>
-        ))
-      : undefined,
+    thematics: thematics?.map((thematic) => (
+      <Link key={thematic.id} href={thematic.url}>
+        {thematic.name}
+      </Link>
+    )),
   };
 
   const footerMetaLabel = intl.formatMessage({
@@ -104,7 +102,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     custom: topics && {
       label: footerMetaLabel,
       value: topics.map((topic) => (
-        <ButtonLink key={topic.id} target={topic.url} className={styles.btn}>
+        <ButtonLink className={styles.btn} key={topic.id} to={topic.url}>
           {topic.logo ? <ResponsiveImage {...topic.logo} /> : null} {topic.name}
         </ButtonLink>
       )),